import 'package:flutter/material.dart';
import 'package:flutter_app/comics/ComicsPage.dart';
import 'package:flutter_app/comics/ComicsTabViewModel.dart';
import 'package:provider/provider.dart';

class ComicsTabPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() => _ComicsState();
}

class _ComicsState extends State<ComicsTabPage> {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
        create: (_) => ComicsTabViewModel(),
        child: Consumer<ComicsTabViewModel>(
            builder: (cContext, model, child) =>
                Column(
                  children: [
                    //搜索
                    searchView(model),
                    //listView
                    exListView(model)
                  ],
                )));
  }


  ///列表栏
  Expanded exListView(ComicsTabViewModel model) {
    return Expanded(
        child: ListView.builder(
          itemCount: model.list.length,
          itemBuilder: (BuildContext context, int index) {
            return GestureDetector(
                onTap: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) =>
                              ComicsPage(comicsData: model.list[index])));
                },
                child: Container(
                  margin: EdgeInsets.fromLTRB(16, 8, 16, 8),
                  padding: EdgeInsets.fromLTRB(0, 0, 16, 0),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(15),
                      boxShadow: [
                        BoxShadow(color: Colors.grey, blurRadius: 3)
                      ]),
                  child: Row(
                    children: [
                      //图片
                      headImage(model, index),
                      //内容
                      contentText(model, index)
                    ],
                  ),
                ));
          },
        ));
  }

  ///搜索栏
  Container searchView(ComicsTabViewModel model) {
    return Container(
      margin: EdgeInsets.fromLTRB(16, 12, 16, 12),
      child: Row(
        children: [
          Expanded(
              flex: 5,
              child: TextField(
                  textInputAction: TextInputAction.search,
                  onSubmitted: (text) {
                    debugPrint("搜索目标：$text");
                    model.getComicsList(text);
                  },
                  decoration: InputDecoration(
                      labelText: "搜索",
                      icon: Icon(Icons.search),
                      border: OutlineInputBorder(),
                      helperText: "请输入漫画/作者/分类")))
        ],
      ),
    );
  }

  ///漫画item内容
  Expanded contentText(ComicsTabViewModel model, int index) {
    return Expanded(
        child: Container(
          margin: EdgeInsets.fromLTRB(0, 16, 0, 16),
          child: Column(
            children: [
              //标题栏
              Row(
                children: [
                  //标题
                  Expanded(
                      child: Container(
                        margin: EdgeInsets.fromLTRB(0, 0, 16, 6),
                        child: Text(model.list[index].title,
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(
                                fontSize: 16, color: Colors.black)),
                        constraints: BoxConstraints(maxWidth: 180),
                      )),
                  //作者
                  Container(
                      alignment: Alignment.centerLeft,
                      margin: EdgeInsets.fromLTRB(0, 0, 0, 6),
                      child: Text(model.list[index].author,
                          style: TextStyle(fontSize: 12, color: Colors.grey)))
                ],
              ),
              //详情栏
              Container(
                child: Text(
                  model.list[index].descs,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(color: Colors.blueGrey, fontSize: 12),
                  maxLines: 3,
                ),
              ),
              //时间
              Container(
                alignment: Alignment.centerLeft,
                margin: EdgeInsets.fromLTRB(0, 6, 8, 0),
                child: Text(
                  "最后更新：${model.list[index].updateTime}",
                  style: TextStyle(color: Colors.grey, fontSize: 10),
                ),
              )
            ],
          ),
        ));
  }

  ///漫画item图片布局
  Container headImage(ComicsTabViewModel model, int index) {
    return Container(
      margin: EdgeInsets.fromLTRB(16, 16, 16, 16),
      width: 66,
      child: ClipRRect(
        //圆角
        borderRadius: BorderRadius.circular(10),
        child: Image.network(model.list[index].cover),
      ),
    );
  }
}